<template>
    <h2>这是会员卡的统计界面</h2>

    <el-table :data="tableData" stripe style="width: 100%">

        <el-table-column prop="name" label="会员姓名" width="180" />
        <el-table-column prop="cardNum" label="卡号" width="180" />
        <el-table-column prop="totalNum" label="总课次" />
        <el-table-column prop="usedTimes" label="已用课次" width="180" />
        <el-table-column prop="restTimes" label="剩余课次" width="180" />
        <el-table-column prop="amount" label="总额" />
        <el-table-column prop="usedCash" label="已用金额" width="180" />
        <el-table-column prop="restCash" label="剩余金额" width="180" />
    
    </el-table>
</template>

<script setup>
    const tableData = [
  {
    cardNum: '20100503',
    name: 'Tom',
    totalNum:18,
    usedTimes:10,
    restTimes:8,
    amount:'1110￥',
    usedCash:'110￥',
    restCash:'1000￥'
  },
  {
    cardNum: '20240502',
    name: 'Jack',
    totalNum:15,
    usedTimes:4,
    restTimes:11,
    amount:'1230￥',
    usedCash:'530￥',
    restCash:'700￥'
  },
  {
    cardNum: '20110504',
    name: 'Jason',
    totalNum:23,
    usedTimes:14,
    restTimes:9,
    amount:'1000￥',
    usedCash:'500￥',
    restCash:'500￥'
  },
  {
    cardNum: '20180501',
    name: 'Annan',
    totalNum:12,
    usedTimes:3,
    restTimes:9,
    amount:'250￥',
    usedCash:'50￥',
    restCash:'200￥'
  },
  {
    cardNum: '20170501',
    name: 'GWJ',
    totalNum:12,
    usedTimes:3,
    restTimes:9,
    amount:'250￥',
    usedCash:'50￥',
    restCash:'200￥'
  },
  {
    cardNum: '20110501',
    name: 'Mye',
    totalNum:12,
    usedTimes:3,
    restTimes:9,
    amount:'250￥',
    usedCash:'50￥',
    restCash:'200￥'
  },
  {
    cardNum: '20170501',
    name: 'Talyor',
    totalNum:12,
    usedTimes:3,
    restTimes:9,
    amount:'250￥',
    usedCash:'50￥',
    restCash:'200￥'
  },
  {
    cardNum: '20120501',
    name: 'Jessica',
    totalNum:12,
    usedTimes:3,
    restTimes:9,
    amount:'250￥',
    usedCash:'50￥',
    restCash:'200￥'
  },
  {
    cardNum: '20220501',
    name: 'Kayn',
    totalNum:12,
    usedTimes:3,
    restTimes:9,
    amount:'250￥',
    usedCash:'50￥',
    restCash:'200￥'
  },
]
</script>

<style scoped>

</style>